<template>
  <div class="page-container banner-container">
    <el-table v-loading="loading" :data="bannerDatas.data" class="table-container">
      <el-table-column label="序号" prop="date" width="180" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" width="180" align="center">
        <template #default="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" align="center">
        <template #default="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column label="中图预览" prop="midImg" align="center">
        <template #default="scope">
          <el-image
            style="width: 150px; height: 100px"
            :src="scope.row.midImg"
            fit="fill"
          />
        </template>
      </el-table-column>
      <el-table-column label="大图预览" prop="bigImg" align="center">
        <template #default="scope">
          <el-image
            style="width: 150px; height: 100px"
            :src="scope.row.bigImg"
            fit="fill"
          />
        </template>
      </el-table-column>
      <el-table-column label="编辑" align="center">
        <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            :open-delay="300"
            placement="top"
            :hide-after="2000"
          >
            <el-button
              type="primary"
              @click="editBannerClick(scope.row, scope.$index)"
              :icon="EditPen"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="编辑">
      <el-form label-position="top">
        <el-form-item autocomplete="off" required label="标题">
          <el-input v-model="bannerDesVal.title"></el-input>
        </el-form-item>
        <el-form-item autocomplete="off" required label="描述">
          <el-input v-model="bannerDesVal.description"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="首页中图">
              <!-- 中图 -->
              <Upload
                :imageUrl="bannerDesVal.midImg"
                :changeImageUrl="(val:string)=>changeImageUrl(val,'midImg')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首页大图">
              <!-- 大图 -->
              <Upload
                :imageUrl="bannerDesVal.bigImg"
                :changeImageUrl="(val:string)=>changeImageUrl(val,'bigImg')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="end" align="center">
          <el-button size="large"> 取消 </el-button>
          <el-button type="primary" size="large" @click="changeBannerDes">
            确定
          </el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from "vue";
import { IBanner, getBanner, setBanner } from "@/api/banner";
import { ElMessage } from "element-plus";
import { EditPen } from "@element-plus/icons-vue";
import Upload from "@/components/Upload.vue";

// 类型约束
interface IBannerData {
  data: IBanner[];
}

// 加载状态
const loading = ref(false);

// 修改内容
let bannerDesVal = reactive<IBanner>({
  title: "",
  description: "",
  midImg: "",
  bigImg: "",
});
let updateIndex = ref<number>(-1);
let dialogVisible = ref(false);
let bannerDatas = reactive<IBannerData>({
  data: [],
});

// 修改图片路径
function changeImageUrl(val: string, key: string) {
  bannerDesVal[key] = val;
}

// 数据请求
async function fetchData() {
  loading.value = true;
  const res = await getBanner();
  loading.value = false;
  if (Array.isArray(res.data)) {
    bannerDatas.data = res.data;
  } else {
    ElMessage({
      message: res.msg,
      type: "success",
    });
  }
}

// 修改banner详情
async function changeBannerDes() {
  let newData = bannerDatas.data.map((banner: IBanner, index: number) => {
    if (index === updateIndex.value) {
      return { ...bannerDesVal };
    }
    delete banner.id;
    return { ...banner };
  });

  bannerDatas.data = newData;
  dialogVisible.value = false;
  ElMessage({
    type: "success",
    message: "标题更新成功！",
  });
  const res = await setBanner(newData);
}

// 修改banner的按钮
function editBannerClick(IndexValue: IBanner, index: number) {
  console.log(IndexValue);
  for (const key in bannerDesVal) {
    bannerDesVal[key] = IndexValue[key];
  }
  updateIndex.value = index;
  dialogVisible.value = true;
}

onBeforeMount(() => {
  // 请求数据
  fetchData();
});
</script>

<style lang="less" scoped></style>
